<template>
  <div class="preview-box">
    <el-row :gutter="20">
      <el-col :span="4">
        <div class="preview-content">
          <span class="preview-text">法人身份证人像面图片</span>
          <div class="preview-img">
              <el-image
              style="width: 100%; height: 100%"
              :src="merchantForm.cardFrontUrl"
              z-index="5000"
              :preview-src-list="[merchantForm.cardFrontUrl]"
              fit="cover"
              >
              </el-image>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="preview-content">
          <span class="preview-text">法人身份证国徽面图片</span>
          <div class="preview-img">
              <el-image
              style="width: 100%; height: 100%"
              :src="merchantForm.cardReverseUrl"
              z-index="5000"
              :preview-src-list="[merchantForm.cardReverseUrl]"
              fit="cover"
              >
              </el-image>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="preview-content">
          <span class="preview-text">法人手持身份证</span>
          <div class="preview-img">
              <el-image
              style="width: 100%; height: 100%"
              :src="merchantForm.handHeldUrl"
              z-index="5000"
              :preview-src-list="[merchantForm.handHeldUrl]"
              fit="cover"
              >
              </el-image>
          </div>
        </div>
      </el-col>
      <el-col :span="4" v-if="merchantForm.licensePicUrl">
        <div class="preview-content">
          <span class="preview-text">营业执照原件照片</span>
          <div class="preview-img">
              <el-image
              style="width: 100%; height: 100%"
              :src="merchantForm.licensePicUrl"
              z-index="5000"
              :preview-src-list="[merchantForm.licensePicUrl]"
              fit="cover"
              >
              </el-image>
          </div>
        </div>
      </el-col>
      <el-col :span="4" v-if="merchantForm.contactFrontPicUrl">
        <div class="preview-content">
          <span class="preview-text">联系人身份证人像面</span>
          <div class="preview-img">
              <el-image
              style="width: 100%; height: 100%"
              :src="merchantForm.contactFrontPicUrl"
              z-index="5000"
              :preview-src-list="[merchantForm.contactFrontPicUrl]"
              fit="cover"
              >
              </el-image>
          </div>
        </div>
      </el-col>
      <el-col :span="4" v-if="merchantForm.contactReversePicUrl">
        <div class="preview-content">
          <span class="preview-text">联系人身份证国徽面</span>
          <div class="preview-img">
              <el-image
              style="width: 100%; height: 100%"
              :src="merchantForm.contactReversePicUrl"
              z-index="5000"
              :preview-src-list="[merchantForm.contactReversePicUrl]"
              fit="cover"
              >
              </el-image>
          </div>
        </div>
      </el-col>
      <el-col :span="4" v-if="merchantForm.holdPrsnCertMfgPicUrl">
        <div class="preview-content">
          <span class="preview-text">控股人身份证人像面</span>
          <div class="preview-img">
              <el-image
              style="width: 100%; height: 100%"
              :src="merchantForm.holdPrsnCertMfgPicUrl"
              z-index="5000"
              :preview-src-list="[merchantForm.holdPrsnCertMfgPicUrl]"
              fit="cover"
              >
              </el-image>
          </div>
        </div>
      </el-col>
      <el-col :span="4" v-if="merchantForm.holdPrsnCertExpPicUrl">
        <div class="preview-content">
          <span class="preview-text">控股人身份证国徽面</span>
          <div class="preview-img">
              <el-image
              style="width: 100%; height: 100%"
              :src="merchantForm.holdPrsnCertExpPicUrl"
              z-index="5000"
              :preview-src-list="[merchantForm.holdPrsnCertExpPicUrl]"
              fit="cover"
              >
              </el-image>
          </div>
        </div>
      </el-col>
      <el-col :span="4" v-if="merchantForm.receiptorCertMfgPicUrl">
        <div class="preview-content">
          <span class="preview-text">受益人身份证人像面</span>
          <div class="preview-img">
              <el-image
              style="width: 100%; height: 100%"
              :src="merchantForm.receiptorCertMfgPicUrl"
              z-index="5000"
              :preview-src-list="[merchantForm.receiptorCertMfgPicUrl]"
              fit="cover"
              >
              </el-image>
          </div>
        </div>
      </el-col>
      <el-col :span="4" v-if="merchantForm.receiptorCertExpPicUrl">
        <div class="preview-content">
          <span class="preview-text">受益人身份证国徽面</span>
          <div class="preview-img">
              <el-image
              style="width: 100%; height: 100%"
              :src="merchantForm.receiptorCertExpPicUrl"
              z-index="5000"
              :preview-src-list="[merchantForm.receiptorCertExpPicUrl]"
              fit="cover"
              >
              </el-image>
          </div>
        </div>
      </el-col>
      <el-col :span="4" v-if="merchantForm.authLetterPicUrl">
        <div class="preview-content">
          <span class="preview-text">业务办理授权函</span>
          <div class="preview-img">
              <el-image
              style="width: 100%; height: 100%"
              :src="merchantForm.authLetterPicUrl"
              z-index="5000"
              :preview-src-list="[merchantForm.authLetterPicUrl]"
              fit="cover"
              >
              </el-image>
          </div>
        </div>
      </el-col>
      <el-col :span="4" v-if="merchantForm.ecardFrontUrl">
        <div class="preview-content">
          <span class="preview-text">非法人身份证人像面</span>
          <div class="preview-img">
              <el-image
              style="width: 100%; height: 100%"
              :src="merchantForm.ecardFrontUrl"
              z-index="5000"
              :preview-src-list="[merchantForm.ecardFrontUrl]"
              fit="cover"
              >
              </el-image>
          </div>
        </div>
      </el-col>
      <el-col :span="4" v-if="merchantForm.ecardReverseUrl">
        <div class="preview-content">
          <span class="preview-text">非法人身份证国徽面</span>
          <div class="preview-img">
              <el-image
              style="width: 100%; height: 100%"
              :src="merchantForm.ecardReverseUrl"
              z-index="5000"
              :preview-src-list="[merchantForm.ecardReverseUrl]"
              fit="cover"
              >
              </el-image>
          </div>
        </div>
      </el-col>
      <el-col :span="4" v-if="merchantForm.holdAttorneyUrl">
        <div class="preview-content">
          <span class="preview-text">手持授权书图片</span>
          <div class="preview-img">
              <el-image
              style="width: 100%; height: 100%"
              :src="merchantForm.holdAttorneyUrl"
              z-index="5000"
              :preview-src-list="[merchantForm.holdAttorneyUrl]"
              fit="cover"
              >
              </el-image>
          </div>
        </div>
      </el-col>
      <el-col :span="4" v-if="merchantForm.accountFrontUrl">
        <div class="preview-content">
          <span class="preview-text">结算卡正面</span>
          <div class="preview-img">
              <el-image
              style="width: 100%; height: 100%"
              :src="merchantForm.accountFrontUrl"
              z-index="5000"
              :preview-src-list="[merchantForm.accountFrontUrl]"
              fit="cover"
              >
              </el-image>
          </div>
        </div>
      </el-col>
      <el-col :span="4" v-if="merchantForm.accountReverseUrl">
        <div class="preview-content">
          <span class="preview-text">结算卡反面</span>
          <div class="preview-img">
              <el-image
              style="width: 100%; height: 100%"
              :src="merchantForm.accountReverseUrl"
              z-index="5000"
              :preview-src-list="[merchantForm.accountReverseUrl]"
              fit="cover"
              >
              </el-image>
          </div>
        </div>
      </el-col>
      <el-col :span="4" v-if="merchantForm.billingAttorneyUrl">
        <div class="preview-content">
          <span class="preview-text">非法人结算授权书图片</span>
          <div class="preview-img">
              <el-image
              style="width: 100%; height: 100%"
              :src="merchantForm.billingAttorneyUrl"
              z-index="5000"
              :preview-src-list="[merchantForm.billingAttorneyUrl]"
              fit="cover"
              >
              </el-image>
          </div>
        </div>
      </el-col>
      <el-col :span="4" v-if="merchantForm.openPermitUrl">
        <div class="preview-content">
          <span class="preview-text">开户许可证</span>
          <div class="preview-img">
              <el-image
              style="width: 100%; height: 100%"
              :src="merchantForm.openPermitUrl"
              z-index="5000"
              :preview-src-list="[merchantForm.openPermitUrl]"
              fit="cover"
              >
              </el-image>
          </div>
        </div>
      </el-col>
      <el-col :span="4" v-if="merchantForm.companyAccPicUrl">
        <div class="preview-content">
          <span class="preview-text">附加对公——开户许可证</span>
          <div class="preview-img">
              <el-image
              style="width: 100%; height: 100%"
              :src="merchantForm.companyAccPicUrl"
              z-index="5000"
              :preview-src-list="[merchantForm.companyAccPicUrl]"
              fit="cover"
              >
              </el-image>
          </div>
        </div>
      </el-col>
      <el-col :span="4" v-if="merchantForm.reservedBalanceFrontUrl">
        <div class="preview-content">
          <span class="preview-text">备用结算——结算卡正面</span>
          <div class="preview-img">
              <el-image
              style="width: 100%; height: 100%"
              :src="merchantForm.reservedBalanceFrontUrl"
              z-index="5000"
              :preview-src-list="[merchantForm.reservedBalanceFrontUrl]"
              fit="cover"
              >
              </el-image>
          </div>
        </div>
      </el-col>
      <el-col :span="4" v-if="merchantForm.reservedBalanceReverseUrl">
        <div class="preview-content">
          <span class="preview-text">备用结算——结算卡反面</span>
          <div class="preview-img">
              <el-image
              style="width: 100%; height: 100%"
              :src="merchantForm.reservedBalanceReverseUrl"
              z-index="5000"
              :preview-src-list="[merchantForm.reservedBalanceReverseUrl]"
              fit="cover"
              >
              </el-image>
          </div>
        </div>
      </el-col>
      <el-col :span="4" v-if="merchantForm.merchantDoorUrl">
        <div class="preview-content">
          <span class="preview-text">商户门头照片</span>
          <div class="preview-img">
              <el-image
              style="width: 100%; height: 100%"
              :src="merchantForm.merchantDoorUrl"
              z-index="5000"
              :preview-src-list="[merchantForm.merchantDoorUrl]"
              fit="cover"
              >
              </el-image>
          </div>
        </div>
      </el-col>
      <el-col :span="4" v-if="merchantForm.interiorUrl">
        <div class="preview-content">
          <span class="preview-text">内景照片</span>
          <div class="preview-img">
              <el-image
              style="width: 100%; height: 100%"
              :src="merchantForm.interiorUrl"
              z-index="5000"
              :preview-src-list="[merchantForm.interiorUrl]"
              fit="cover"
              >
              </el-image>
          </div>
        </div>
      </el-col>
      <el-col :span="4" v-if="merchantForm.checkoutCounterUrl">
        <div class="preview-content">
          <span class="preview-text">收银台照片</span>
          <div class="preview-img">
              <el-image
              style="width: 100%; height: 100%"
              :src="merchantForm.checkoutCounterUrl"
              z-index="5000"
              :preview-src-list="[merchantForm.checkoutCounterUrl]"
              fit="cover"
              >
              </el-image>
          </div>
        </div>
      </el-col>
      <el-col :span="4" v-if="merchantForm.acquiringUrl">
        <div class="preview-content">
          <span class="preview-text">收单协议首页</span>
          <div class="preview-img">
              <el-image
              style="width: 100%; height: 100%"
              :src="merchantForm.acquiringUrl"
              z-index="5000"
              :preview-src-list="[merchantForm.acquiringUrl]"
              fit="cover"
              >
              </el-image>
          </div>
        </div>
      </el-col>
      <el-col :span="4" v-if="merchantForm.stampUrl">
        <div class="preview-content">
          <span class="preview-text">收单协议盖章页</span>
          <div class="preview-img">
              <el-image
              style="width: 100%; height: 100%"
              :src="merchantForm.stampUrl"
              z-index="5000"
              :preview-src-list="[merchantForm.stampUrl]"
              fit="cover"
              >
              </el-image>
          </div>
        </div>
      </el-col>
      <el-col :span="4" v-if="merchantForm.businessUrl">
        <div class="preview-content">
          <span class="preview-text">经营业务照片</span>
          <div class="preview-img">
              <el-image
              style="width: 100%; height: 100%"
              :src="merchantForm.businessUrl"
              z-index="5000"
              :preview-src-list="[merchantForm.businessUrl]"
              fit="cover"
              >
              </el-image>
          </div>
        </div>
      </el-col>
      <el-col :span="4" v-if="merchantForm.leaseholdFirstUrl">
        <div class="preview-content">
          <span class="preview-text">租赁合同第一页</span>
          <div class="preview-img">
              <el-image
              style="width: 100%; height: 100%"
              :src="merchantForm.leaseholdFirstUrl"
              z-index="5000"
              :preview-src-list="[merchantForm.leaseholdFirstUrl]"
              fit="cover"
              >
              </el-image>
          </div>
        </div>
      </el-col>
      <el-col :span="4" v-if="merchantForm.leaseholdSecondUrl">
        <div class="preview-content">
          <span class="preview-text">租赁合同第二页</span>
          <div class="preview-img">
              <el-image
              style="width: 100%; height: 100%"
              :src="merchantForm.leaseholdSecondUrl"
              z-index="5000"
              :preview-src-list="[merchantForm.leaseholdSecondUrl]"
              fit="cover"
              >
              </el-image>
          </div>
        </div>
      </el-col>
      <el-col :span="4" v-if="merchantForm.leaseholdThirdUrl">
        <div class="preview-content">
          <span class="preview-text">租赁合同第三页</span>
          <div class="preview-img">
              <el-image
              style="width: 100%; height: 100%"
              :src="merchantForm.leaseholdThirdUrl"
              z-index="5000"
              :preview-src-list="[merchantForm.leaseholdThirdUrl]"
              fit="cover"
              >
              </el-image>
          </div>
        </div>
      </el-col>
      <el-col :span="4" v-if="merchantForm.areaPicUrl">
        <div class="preview-content">
          <span class="preview-text">租赁面积照片</span>
          <div class="preview-img">
              <el-image
              style="width: 100%; height: 100%"
              :src="merchantForm.areaPicUrl"
              z-index="5000"
              :preview-src-list="[merchantForm.areaPicUrl]"
              fit="cover"
              >
              </el-image>
          </div>
        </div>
      </el-col>
      <el-col :span="4" v-if="merchantForm.authCerUrl">
        <div class="preview-content">
          <span class="preview-text">授权书</span>
          <div class="preview-img">
              <el-image
              style="width: 100%; height: 100%"
              :src="merchantForm.authCerUrl"
              z-index="5000"
              :preview-src-list="[merchantForm.authCerUrl]"
              fit="cover"
              >
              </el-image>
          </div>
        </div>
      </el-col>
      <el-col :span="4" v-if="merchantForm.positioningPhotoUrl">
        <div class="preview-content">
          <span class="preview-text">定位照</span>
          <div class="preview-img">
              <el-image
              style="width: 100%; height: 100%"
              :src="merchantForm.positioningPhotoUrl"
              z-index="5000"
              :preview-src-list="[merchantForm.positioningPhotoUrl]"
              fit="cover"
              >
              </el-image>
          </div>
        </div>
      </el-col>
      <el-col :span="4" v-if="merchantForm.clientPhotoUrl">
        <div class="preview-content">
          <span class="preview-text">客户经理与客户合影照片</span>
          <div class="preview-img">
              <el-image
              style="width: 100%; height: 100%"
              :src="merchantForm.clientPhotoUrl"
              z-index="5000"
              :preview-src-list="[merchantForm.clientPhotoUrl]"
              fit="cover"
              >
              </el-image>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  props: {
    merchantForm: Object,
  },
  data() {
    return {
      merchantTitle: {
        basicTitle: "基本信息",
        cardTitle: "结算账户",
        rateTitle: "费率信息",
        shopTitle: "协议信息",
      },
      aisleList: [],
    };
  },
  created() {},
  methods: {},
};
</script>

<style lang="scss" scoped>
.preview-box {
  display: flex;
  // align-items: center;
  justify-content: center;
  flex-direction: column;
  .preview-content {
    flex: 1;
    border-radius: 10px;
    padding: 14px;
    height: auto;
    // background: #F2F2F2;
    background: #F8F9FD;
    .preview-text {
      height: 30px;
      line-height: 30px;
    }
    .preview-img {
      border-radius: 10px;
      width: 100%;
      height: 140px;
      background: #FFFFFF;
    }
  }
}
.preview-title {
  text-align: center;
  margin-top: 40px;
  margin-bottom: 30px;
  span {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
  }
}
span {
  // display: block;
  font-size: 14px;
  margin: 8px 0;
}
</style>